<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="banner名称">
                <a-input v-model="queryParam.name" placeholder="请输入banner名称"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md=" 8 || 24" :sm="24">
              <a-button type="primary" @click="queryTable">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table :columns="columns" :dataSource="dataList" :pagination="false" rowKey="id">
        <a slot="name" slot-scope="text" href="javascript:;">{{ text }}</a>
        <span slot="tags" slot-scope="tags">
          <a-tag v-for="tag in tags" color="blue" :key="tag">{{ tag }}</a-tag>
        </span>
        <img
          style="height:50px"
          slot="pic"
          slot-scope="text, record"
          :src="'https://admin.muyumall.com'+record.img_url"/>
        <div slot="status" slot-scope="text">
          <!--<a-tag color="blue" v-if="text===1">上架</a-tag>
          <a-tag color="blue" v-if="text===2">下架</a-tag>-->
          <a-tag color="blue">{{ text | statusFilter }}</a-tag>
        </div>
        <span slot="action" slot-scope="text, record">
          <a href="javascript:" @click.prevent="bannerEdit(record)">编辑</a>
          <a-divider type="vertical"></a-divider>
          <a-popconfirm
            v-if="dataList.length"
            title="确认删除?"
            @confirm="() => onDelete(record.id)">
            <a href="javascript:">删除</a>
          </a-popconfirm>
          <a-divider type="vertical"></a-divider>
          <a href="javascript:" @click.prevent="showModal(record)">上架</a>
        </span>
      </a-table>
      <my-pagination
        :total="pagination.totalCount"
        :pageSize="pagination.pageSize"
        :current="pagination.pageNo"
        @onChange="onChangePage"
        @onShowSizeChange="onShowSizeChangePage"
      ></my-pagination>
    </a-card>

    <!--banner上下架弹窗-->
    <a-modal
      title="banner上下架"
      v-model="visible"
      @ok="changeState"
      okText="确认"
      cancelText="取消"
    >
      <a-radio-group v-model="state">
        <a-radio :value="1">上架</a-radio>
        <a-radio :value="2">下架</a-radio>
      </a-radio-group>
    </a-modal>

  </div>
</template>

<script>
import MyPagination from '../../components/Autism/myPagination'
import { deleteBanner, queryBannerPage, bannerStatus } from '@/api/banner'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '缩略图',
    dataIndex: 'img_url',
    key: 'img_url',
    scopedSlots: { customRender: 'pic' }
  }, {
    title: '顺序',
    dataIndex: 'serial_no',
    key: 'serial_no'
  }, {
    title: '创建时间',
    key: 'create_date_time',
    dataIndex: 'create_date_time'
  }, {
    title: '上架状态',
    key: 'upper_shelf_state',
    dataIndex: 'upper_shelf_state',
    slots: { title: 'status' },
    scopedSlots: { customRender: 'status' }
  }, {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }]

export default {
  name: 'BannerList',
  components: {
    MyPagination
  },
  data () {
    return {
      state: 2,
      id: '',
      editVisible: false,
      visible: false,
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 0
      },
      currentTab: 0,
      queryParam: {},
      columns,
      dataList: []
    }
  },
  beforeCreate () {
  },
  created () {
  },
  mounted () {
    this.getList()
  },
  methods: {
    // banner 编辑
    bannerEdit (item) {
      console.log(item)
      this.$router.push({ path: 'banner-edit', query: { id: item.id } })
    },
    // 根据 id 删除
    onDelete (id) {
      console.log(id)
      deleteBanner({
        id: id
      })
        .then((res) => {
          if (res) { this.$message.success('成功！') }

          console.log(res)
          if (res) {
            this.getList()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    showModal (item) {
      console.log(item)
      this.visible = true
      this.state = item.upper_shelf_state
      this.id = item.id
    },
    // 上下架
    changeState () {
      console.log(this.state)
      bannerStatus({
        id: this.id,
        upper_shelf_state: this.state
      }).then((res) => {
        this.visible = false
        this.getList()
      })
        .catch((err) => {
          console.log(err)
          this.visible = false
        })
    },
    // 分页获取列表
    getList (isSearch) {
      const param = {
        page_index: this.pageNo,
        page_size: this.pageSize
      }
      if (isSearch) {
        param.name = this.queryParam.name
      }
      queryBannerPage(param)
        .then((res) => {
          console.log(res)
          this.dataList = res.collection
          this.pagination.pageNo = res.page_index
          this.pagination.pageSize = res.page_size
          this.pagination.totalCount = res.total_count
        })
        .catch((err) => {
          console.log(err)
        })
    },
    queryTable () {
      console.log(this.queryParam)
      this.getList(true)
    },
    onChangePage (pageNo, pageSize) {
      this.pagination.pageNo = pageNo
      // 重新请求数据
      this.getList()
    },
    onShowSizeChangePage (pageNo, pageSize) {
      this.pagination.pageSize = pageSize
      // 重新请求数据
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
